<template>
  <view
    class="co-container"
    :prop="Symbol"
    :change:prop="renderBiz.onChange"
    id="renderjs-view"
  >
    <t-header @back="clickNavBackFn">账户交易</t-header>
    <!-- content -->
    <view class="co-content">
      <!-- tabs -->
      <view class="co-content-tabs">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          @click="changTab(index)"
          class="co-content-tab"
          :class="{ 'co-content-tab-selected': tabIndex === index }"
          >{{ item.name }}</view
        >
      </view>
      <!-- components -->
      <view class="co-content-comp">
        <swiper :current="tabIndex" @change="swiperChange">
          <swiper-item v-for="(tab, i) in tabs" :key="i">
            <component
              :ref="tab.comp"
              :i="tabIndex"
              :is="tab.comp"
              :code="Symbol"
              :height="height"
              :stockData="stockData"
              @changeCode="changeCode"
              @confirm="handleConfirm"
            />
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>

  <tui-modal :show="showConfirm" custom @cancel="showConfirm = false">
    <view class="text-center text-bold text-lg padding-bottom"
      >确认{{ tempData.method == 'buy' ? '买入' : '卖出' }}吗</view
    >
    <tui-list-cell padding="20rpx 0">
      <view class="flex align-center justify-between">
        <view>名称</view>
        <view>{{ tempData.title }}</view>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="20rpx 0">
      <view class="flex align-center justify-between">
        <view>价格</view>
        <view>{{ tempData.price }}</view>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="20rpx 0">
      <view class="flex align-center justify-between">
        <view>股数</view>
        <view>{{ tempData.number }}</view>
      </view>
    </tui-list-cell>
    <tui-list-cell padding="20rpx 0">
      <view class="flex align-center justify-between">
        <view>总价</view>
        <view>{{ tempData.total }}</view>
      </view>
    </tui-list-cell>
    <view class="margin-top flex justify-between">
      <tui-button @click="cancleAction" width="220rpx" :size="28" type="gray"
        >取消</tui-button
      >
      <tui-button
        :disabled="tempData.number <= 0"
        @click="confirmAction"
        width="220rpx"
        :size="28"
        type="theme"
        >{{ tempData.method == 'buy' ? '买入' : '卖出' }}</tui-button
      >
    </view>
  </tui-modal>
</template>

<script module="renderBiz" lang="renderjs">
  import renderBiz from './rederEventSource.js';
  export default {
  	mixins: [renderBiz]
  }
</script>
<script>
  import buyPage from './comp/buy.vue';
  import sellPage from './comp/sell.vue';
	import THeader from '@/components/views/t-header/index.vue'; // 头部组件
  export default {
    components: {
      buyPage,
      sellPage,
      THeader,
    },
    data() {
      return {
        showConfirm: false,
        tabIndex: 0,
        height: '',
        tabs: [
          {
            name: '买入',
            comp: 'buyPage',
          },
          {
            name: '卖出',
            comp: 'sellPage',
          },
        ],
        stockData: null,
        Symbol: '',
        tempData: {},
      };
    },
    onLoad(t) {
      this.first = true;
      if (t.type) {
        this.tabIndex = t.type * 1;
      }
      if (t.code) {
        this.Symbol = t.code;
        // this.getStockData()
      }
      this.height =
        uni.getSystemInfoSync().windowHeight - uni.upx2px(200 + 40) + 'px';
    },
    beforeDestroy() {
      this.Symbol = 'null';
    },
    onUnload() {
      this.Symbol = 'null';
    },
    methods: {
      clickNavBackFn() {
        uni.navigateBack();
      },
      acceptDataFromRenderjs(data) {
        console.log(data);
        this.actionData(data);
      },
      actionData(data) {
        if (data && data != null) {
          for (let key in data) {
            if (!this.first) {
              this.stockData[key] = data[key];
            }
          }
          if (this.first) {
            this.stockData = data;
          }
          this.first = false;
        }
      },
      cancleAction() {
        console.log(123123);
        this.showConfirm = false;
        this.$off('confirm');
      },
      confirmAction() {
        this.showConfirm = false;
        this.$refs[this.tempData.method + 'Page'][0][this.tempData.method]();
      },
      handleConfirm(e) {
        console.log(123123111);
        this.tempData = e;
        // #ifdef APP-PLUS
        this.showConfirm = true;
        // #endif
        // #ifdef H5
        this.$nextTick(() => {
          this.showConfirm = true;
        });
        // #endif
      },
      changeCode(Symbol) {
        //里层改变股票代码，重新建立长连接
        this.Symbol = Symbol;
        this.first = true;
        // this.getStockData()
      },
      getStockData() {
        let first = true; //是否第一次
        this.$store.dispatch('creartEventSource', {
          symbol: this.Symbol,
          onMsg: (data) => {
            if (data) {
              for (let key in data) {
                if (!first) {
                  this.stockData[key] = data[key];
                }
              }
              if (first) {
                this.stockData = data;
              }
              first = false;
            }
          },
        });
      },
      changTab(e) {
        // this.tabIndex = e.index
        this.tabIndex = e;
      },
      swiperChange(e) {
        this.tabIndex = e.detail.current;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .co-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    box-sizing: border-box;

    .co-content {
      flex: 1;
      display: flex;
      flex-direction: column;
			padding: 0 18rpx 26rpx;
      border-radius: 34rpx;
      background: #ffffff;

      .co-content-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 124rpx;
        padding: 0 122rpx;
        border-radius: 17px 17px 0 0;
        background: linear-gradient(180deg, #ffffff 0%, #f7e9e9 100%);

        .co-content-tab {
          color: #8f8f8f;
          font-size: 36rpx;
          font-weight: 400;
          font-family: PingFangSC, PingFang SC;

          &.co-content-tab-selected {
            position: relative;
            color: #000000;
            font-size: 40rpx;
            transition: all 0.2s linear;

            &::after {
              content: '';
              position: absolute;
              top: 64rpx;
              left: 50%;
              width: 58rpx;
              height: 8rpx;
              border-radius: 22rpx;
              background: #f74e51;
              transform: translateX(-50%);
            }
          }
        }
      }

      .co-content-comp {
        flex: 1;

        > swiper {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
